<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Document</title>
    <style>
        body{
            padding: 0;
            margin: 0;

        }
        .main{
            width: 100%;
            height: 100vh;
            background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
            display: flex;
            flex-direction: column;
        }
        .title{
            width: 100%;
            text-align: center;
            padding-top: 10%;
        }
        .text{
            color: white;
            font-size: 35px;
            font-weight: bolder;
        }
        .artcle{
            padding: 10px 20px;
            height: 200px;
        }
        .content{
            width: 100%;
            background: white;
            text-align: center;
            border-radius: 15px;
            padding: 20px 0;
            height: 100%;
        }
        .music{
            width: 100%;
            display: flex;
            bottom: 0;
        }
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }
        
        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }
        
        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    </style>
</head>
<body>
    <div class="main" id="app">
        <div class="title">
            <div class="text">祝XXX生日快乐!</div>
        </div>
        

        <el-carousel :interval="4000" type="card" height="200px" style="margin: 30px 20px;">
            <el-carousel-item v-for="item in 6" :key="item" style="border-radius: 15px;">
              <h3 class="medium">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        <div class="artcle">
            
            <div class="content">
                <div class="image">
                    <img src="./生日快乐.png" alt="" style="width: 100px;height: 50px;">
                </div>
                <div class="textarea">
                    时光荏苒，岁月如梦。祝你生日快乐，愿这一刻的欢笑永远定格在记忆中，成为我们共同珍藏的宝藏。
                </div>
            </div>
        
        </div>
        <div class="music">
            <iframe frameborder="no" marginwidth="0" marginheight="0" width=0 height=86 style="position:fixed;bottom:0;left:0;width: 100%" src="https://music.163.com/outchain/player?type=2&id=1417125661&auto=1&height=66"></iframe>
        </div>
    </div>
    
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let stop, staticx;
const img = new Image();
// 这里原js作者高明操作,请看源码,如何进制转成樱花
img.src =
  "";

function Sakura(x, y, s, r, fn) {
  this.x = x;
  this.y = y;
  this.s = s;
  this.r = r;
  this.fn = fn;
}

Sakura.prototype.draw = function (cxt) {
  cxt.save();
  const xc = (40 * this.s) / 4;
  cxt.translate(this.x, this.y);
  cxt.rotate(this.r);
  cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s);
  cxt.restore();
};

Sakura.prototype.update = function () {
  this.x = this.fn.x(this.x, this.y);
  this.y = this.fn.y(this.y, this.y);
  this.r = this.fn.r(this.r);
  if (
    this.x > window.innerWidth ||
    this.x < 0 ||
    this.y > window.innerHeight ||
    this.y < 0
  ) {
    this.r = getRandom("fnr");
    if (Math.random() > 0.4) {
      this.x = getRandom("x");
      this.y = 0;
      this.s = getRandom("s");
      this.r = getRandom("r");
    } else {
      this.x = window.innerWidth;
      this.y = getRandom("y");
      this.s = getRandom("s");
      this.r = getRandom("r");
    }
  }
};

SakuraList = function () {
  this.list = [];
};
SakuraList.prototype.push = function (sakura) {
  this.list.push(sakura);
};
SakuraList.prototype.update = function () {
  let i = 0,
    len = this.list.length;
  for (; i < len; i++) {
    this.list[i].update();
  }
};
SakuraList.prototype.draw = function (cxt) {
  let i = 0,
    len = this.list.length;
  for (; i < len; i++) {
    this.list[i].draw(cxt);
  }
};
SakuraList.prototype.get = function (i) {
  return this.list[i];
};
SakuraList.prototype.size = function () {
  return this.list.length;
};

function getRandom(option) {
  let ret, random;
  switch (option) {
    case "x":
      ret = Math.random() * window.innerWidth;
      break;
    case "y":
      ret = Math.random() * window.innerHeight;
      break;
    case "s":
      ret = Math.random();
      break;
    case "r":
      ret = Math.random() * 6;
      break;
    case "fnx":
      random = -0.5 + Math.random();
      ret = function (x, y) {
        return x + 0.5 * random - 1.7;
      };
      break;
    case "fny":
      random = 1.5 + Math.random() * 0.7;
      ret = function (x, y) {
        return y + random;
      };
      break;
    case "fnr":
      random = Math.random() * 0.03;
      ret = function (r) {
        return r + random;
      };
      break;
  }
  return ret;
}

function startSakura() {
  requestAnimationFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame;
  let canvas = document.createElement("canvas"),
    cxt;
  staticx = true;
  canvas.height = window.innerHeight;
  canvas.width = window.innerWidth;
  canvas.setAttribute(
    "style",
    "position: fixed;left: 0;top: 0;pointer-events: none;"
  );
  canvas.setAttribute("id", "canvas_sakura");
  document.getElementsByTagName("body")[0].appendChild(canvas);
  cxt = canvas.getContext("2d");
  const sakuraList = new SakuraList();
  for (let i = 0; i < 50; i++) {
    let sakura,
      randomX,
      randomY,
      randomS,
      randomR,
      randomFnx,
      randomFny,
      randomFnR;
    randomX = getRandom("x");
    randomY = getRandom("y");
    randomR = getRandom("r");
    randomS = getRandom("s");
    randomFnx = getRandom("fnx");
    randomFny = getRandom("fny");
    randomFnR = getRandom("fnr");
    sakura = new Sakura(randomX, randomY, randomS, randomR, {
      x: randomFnx,
      y: randomFny,
      r: randomFnR,
    });
    sakura.draw(cxt);
    sakuraList.push(sakura);
  }
  stop = requestAnimationFrame(function () {
    cxt.clearRect(0, 0, canvas.width, canvas.height);
    sakuraList.update();
    sakuraList.draw(cxt);
    stop = requestAnimationFrame(arguments.callee);
  });
}

window.onresize = function () {
  const canvasSnow = document.getElementById("canvas_sakura");
  canvasSnow.width = window.innerWidth;
  canvasSnow.height = window.innerHeight;
};

img.onload = function () {
  startSakura();
};

function stopp() {
  if (staticx) {
    const child = document.getElementById("canvas_sakura");
    child.parentNode.removeChild(child);
    window.cancelAnimationFrame(stop);
    staticx = false;
  } else {
    startSakura();
  }
}

  new Vue({
    el: '#app',
    data: function() {
      return { visible: false }
    }
  })
</script>
</html>